<template>
    <div :class="layout == 'center' ? 'centerStyle' : 'bgColor sideStyle'">
        <div style="position: absolute;right: 10px;top: 10px;" @mouseleave="handleLeave">
            <div ref="b" class="gbgColor b">
                <a-space>
                    <div v-for='e in ["#1677ff", "#ff4d4f", "#52c41a", "#722ed1", "#faad14", "#eb2f96", "#13a8a8"]'
                        @click="handleSwitchTheme(e)" :style="{
                            background: e
                        }" style="width: 22px;height: 22px;border-radius: 50%;cursor: pointer;"></div>
                </a-space>
            </div>
            <div class="gbgColor capsule">
                <a-space :size="12">
                    <svg-icon v-for="e in ['tsp', THEME.isDark ? 'moon' : 'sun']"
                        :color="THEME.isDark ? '#00000' : '#070605'" @mouseover="handleHover(e)" @click="handleClick(e)"
                        :icon-class="e" size="20" style="cursor: pointer;" />
                    <a-dropdown>
                        <svg-icon @mouseover="handleHover('bj')" @click="handleClick('bj')"
                            :color="THEME.isDark ? '#00000' : '#070605'" icon-class="bj" size="20"
                            style="cursor: pointer;" />
                        <template #overlay>
                            <a-menu>
                                <a-menu-item>
                                    <span @click="handleLayout('left')">居左</span>
                                </a-menu-item>
                                <a-menu-item>
                                    <span @click="handleLayout('center')">居中</span>
                                </a-menu-item>
                                <a-menu-item>
                                    <span @click="handleLayout('right')">居右</span>
                                </a-menu-item>
                            </a-menu>
                        </template>
                    </a-dropdown>
                    <a-dropdown>
                        <svg-icon @mouseover="handleHover('zy')" @click="handleClick('zy')"
                            :color="THEME.isDark ? '#00000' : '#070605'" icon-class="zy" size="20"
                            style="cursor: pointer;" />
                        <template #overlay>
                            <a-menu>
                                <a-menu-item>
                                    <span>简体中文</span>
                                </a-menu-item>
                                <a-menu-item>
                                    <span>English</span>
                                </a-menu-item>
                            </a-menu>
                        </template>
                    </a-dropdown>


                </a-space>
            </div>
        </div>
        <div style="font-weight: bolder;font-size: clamp(20px, 2.6vw, 32px);margin-top: 10px;" class="textColor">欢迎回来
            👋🏻 {{ width }}
        </div>
        <div class="subTextColor" style="font-size: 14px;margin: 10px 0  20px 0;">
            请输入您的帐户信息以开始管理您的项目</div>
        <a-form :model="loginData" style="width: 100%;" :label-col="{ span: 0 }" :wrapper-col="{ span: 24 }"
            autocomplete="off" @finish="onFinish">
            <a-form-item label="" name="tenant">
                <a-select v-model:value="loginData.tenant" size="large" style="width: 100%"
                    :options="options1"></a-select>
            </a-form-item>

            <a-form-item label="" name="username">
                <a-input v-model:value="loginData.username" size="large" />
            </a-form-item>

            <a-form-item label="" name="password">
                <a-input-password v-model:value="loginData.password" size="large" />
            </a-form-item>

            <a-form-item name="remember">
                <div style="display: flex;justify-content: space-between;">
                    <div>
                        <a-checkbox v-model:checked="loginData.remember">记住账号</a-checkbox>
                    </div>
                    <a-button type="link"><span class="textPrimaryColor">忘记密码?</span></a-button>
                </div>
            </a-form-item>

            <a-form-item>
                <a-button type="primary" @click="handleSubmit" size="large" block html-type="submit">登录</a-button>
            </a-form-item>

            <a-form-item>
                <div style="display: flex;justify-content: space-between;gap: 20px;">
                    <a-button style="flex:1" size="large" html-type="submit">邮箱登录</a-button>
                    <a-button style="flex:1" size="large" html-type="submit">扫码登录</a-button>
                </div>
            </a-form-item>
        </a-form>
        <a-divider>
            <div style="font-size: 12px;">其他登录方式</div>
        </a-divider>
        <div style="display: flex;align-items: center;justify-content: center;width: 100%;">

            <a-space> <svg-icon icon-class="qq" :color="THEME.isDark ? '#00000' : '#070605'" size="20"
                    style="cursor: pointer;" />
                <svg-icon icon-class="wx" :color="THEME.isDark ? '#00000' : '#070605'" size="20"
                    style="cursor: pointer;" /></a-space>
        </div>
        <div class="textColor"
            style="display: flex;align-items: center;justify-content: center;width: 100%;margin-top: 30px;">
            还没有账号? <a-button type="link"><span class="textPrimaryColor">创建账号</span></a-button></div>
        <div
            style="display: flex;align-items: center;justify-content: center;left: 50%; transform: translateX(-50%);width: 100%; margin-top: 30px;font-size: 13px;color: #888;position: absolute;bottom: 14px;">
            Copyright © 2025 Vjie Admin Antd</div>
    </div>
</template>

<script setup lang="ts">
import { subTextColor, textPrimaryColor, textColor, bgColor, gbgColor, THEME } from '@/composables/useTheme';
import { getCurrentInstance } from 'vue'
import { useWindowSize } from '@vueuse/core'
const { width } = useWindowSize()
const { proxy } = getCurrentInstance() as any
defineProps({
    layout: {
        type: String,
        default: 'right'
    }
})
const emits = defineEmits(['handleSubmit', 'layoutChange'])
const handleLeave = () => {
    proxy.$refs.b.style.transform = 'translateX(0px)'
    proxy.$refs.b.style.width = '130px'
}

const handleSubmit = () => {
    emits('handleSubmit')
}

const options1 = [
    {
        label: '选项1',
        value: '1',
    },
    {
        label: '选项2',
        value: '2',
    },
    {
        label: '选项3',
        value: '3',
    },
]
const handleHover = (e: string) => {
    if (e === 'tsp') {
        proxy.$refs.b.style.transform = 'translateX(-92px)'
        proxy.$refs.b.style.width = '250px'
    } else {
        proxy.$refs.b.style.transform = 'translateX(0px)'
        proxy.$refs.b.style.width = '130px'
    }
}

const handleLayout = (e: string) => {
    emits('layoutChange', e)
}
const loginData = ref({
    tenant: '',
    username: '',
    password: '',
    remember: true,
});

const onFinish = (values: any) => {
    console.log('Success:', values);
};

const handleClick = (e: string) => {
    if (['sun', 'moon'].includes(e)) {
        THEME.value.isDark = !THEME.value.isDark
        THEME.value.isDark ? (document.querySelector('body') as HTMLElement).classList.add('dark') : (document.querySelector('body') as HTMLElement).classList.remove('dark')
    }
}
const handleSwitchTheme = (theme: string) => {
    THEME.value.token.colorPrimary = theme
}
</script>

<style lang="scss" scoped>
.subTextColor {
    color: v-bind('`${subTextColor} `');
}

.textPrimaryColor {
    color: v-bind('`${textPrimaryColor} `');
}

.textColor {
    color: v-bind('`${textColor} `');
}

.bgColor {
    background-color: v-bind('`${bgColor} `');
}

.b {
    position: absolute;
    right: 0px;
    top: 0;
    background-color: v-bind('`${gbgColor} `');
    width: 130px;
    border-radius: 20px;
    display: flex;
    overflow: hidden;
    align-items: center;
    justify-content: flex-start;
    padding-left: 18px;
    height: 44px;
    transform: translateX(0px);
    transition: all 0.3s ease-in-out;
}

.sideStyle {
    height: 100%;
    padding: 0 10%;
    background: v-bind('`${bgColor} `');
    width: 100%;
    border-radius: 0px;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    justify-content: center;
    position: relative;
}

.centerStyle {
    height: 100%;
    padding: 0 5%;
    background: v-bind('`${bgColor} `');
    max-width: 560px;
    width: 100%;
    border-radius: 20px;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    justify-content: center;
    position: relative;
}

.capsule {
    position: absolute;
    right: 0px;
    top: 0;
    background-color: v-bind('`${gbgColor} `');
    width: 152px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 44px;
}
</style>